@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Montserrat:wght@400;500;600;700&family=Inter:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp');

:root {
    --primary: #1D4ED8;
    --secondary: #422ddeae;
    --accent: #7C3AED;
    --success: #16A34A;
    --error: #DC3545;
    --dark: #271f37;
    --light: #FAFAFA;
    --gray: #E5E7EB;
    --card-bg: #FFFFFF;
    --border-radius: 20px;
    --shadow: 0 15px 40px rgba(0,0,0,0.15);
    --transition: all 0.4s ease;
}

*{margin:0;padding:0;box-sizing:border-box}

body{
    font-family:'Montserrat',sans-serif;
    min-height:100vh;
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0d1117 100%);
    color:#fdfeff;
    overflow-x:hidden;
    padding:20px 0 80px;
}

/* FONDO ESTELAR SUAVE Y ELEGANTE */
.stars,.shooting-star{
    position:fixed;top:0;left:0;width:100%;height:100%;
    pointer-events:none;z-index:1;
}
.stars{
    box-shadow:
    10vw 15vh 1.5px #c4b5fd,
    35vw 40vh 1px #a78bfa,
    60vw 70vh 1.5px #ddd6fe,
    85vw 25vh 1px #c8b5ff,
    20vw 80vh 1.5px #e0d6ff;
    animation:brillar 12s infinite linear;
}
.stars::after{
    content:"";width:1px;height:1px;background:#e0d6ff;
    box-shadow:45vw 55vh 1.5px #c8b5ff, 75vw 85vh 1px #a78bfa;
    animation:brillar 9s infinite linear reverse;
}
.shooting-star{
    width:140px;height:1.5px;
    background:linear-gradient(90deg, #a78bfa, transparent);
    opacity:0.7;
    animation:estrella 9s infinite linear;
}
.shooting-star:nth-child(2){top:15%;animation-delay:1.5s}
.shooting-star:nth-child(3){top:40%;animation-delay:3.5s}
.shooting-star:nth-child(4){top:70%;animation-delay:2s}
.shooting-star:nth-child(5){top:88%;animation-delay:5s}
@keyframes brillar{0%,100%{opacity:0.6}50%{opacity:0.2}}
@keyframes estrella{0%{transform:translateX(-200px) rotate(30deg);opacity:0}20%{opacity:0.8}100%{transform:translateX(130vw) translateY(70vh) rotate(30deg);opacity:0}}

/* NAVBAR FIJA PROFESIONAL (tu estilo original pero más elegante) */
.navbar{
    background: linear-gradient(135deg, var(--primary), #2563eb);
    padding: 1.3rem 6%;
    position:fixed;
    top:0;left:0;right:0;
    z-index:1000;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 6px 25px rgba(94, 29, 216, 0.35);
    backdrop-filter:blur(10px);
}
.logo{
    color:white;
    font-family:'Cinzel',serif;
    font-size:2rem;
    font-weight:700;
    letter-spacing:1px;
}
.nav-links{
    display:flex;
    gap:2.8rem;
    list-style:none;
}
.nav-links a{
    color:white;
    text-decoration:none;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:1.05rem;
    transition:var(--transition);
}
.nav-links a:hover{
    opacity:0.85;
    transform:translateY(-3px);
}
.menu-toggle{
    display:none;
    color:white;
    font-size:2.4rem;
    cursor:pointer;
}

/* MENÚ HAMBURGUESA FLOTANTE + HOME */
.menu-float{
    position:fixed;
    top:25px;
    left:25px;
    z-index:999;
}
.menu-btn{
    width:68px;
    height:68px;
    background: linear-gradient(135deg, #6b46c1, #8b5cf6);
    color:white;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(107,70,193,.4);
    transition:.3s;
}
.menu-btn:hover{
    transform:scale(1.08);
}
.menu-btn::before{content:"≡";font-weight:900}

.panel{
    position:absolute;
    top:82px;
    left:0;
    background:rgb(77, 43, 187);
    backdrop-filter:blur(18px);
    min-width:290px;
    border-radius:20px;
    padding:22px 0;
    box-shadow:0 15px 40px rgba(0,0,0,.6);
    border:1px solid rgba(139,92,246,.3);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:.4s ease;
}
.panel.active{opacity:1;visibility:visible;transform:none}
.panel a{
    display:block;padding:14px 32px;color:#e0d6ff;
    text-decoration:none;font-weight:600;transition:.3s;
}
.panel a:hover{
    background:rgba(139,92,246,.2);
    padding-left:42px;
    color:white;
}

.home-float-top{
    position:fixed;
    top:110px;
    right:30px;
    width:64px;height:64px;
    background: linear-gradient(135deg, var(--secondary), #302ddeab);
    color:white;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:34px;
    box-shadow:0 10px 30px rgba(49, 12, 234, 0.5);
    z-index:999;
    border:3px solid white;
    transition:.3s;
}
.home-float-top:hover{transform:scale(1.12)}

/* CONTENEDOR PRINCIPAL */
.container{
    max-width:1050px;
    margin:0 auto 80px;
    padding:55px;
    background: linear-gradient(145deg, rgba(63, 32, 157, 0.75), rgba(68, 37, 210, 0.9));
    backdrop-filter:blur(20px);
    border-radius:40px;
    border:1px solid rgb(138, 92, 246);
    box-shadow:0 25px 80px rgba(0,0,0,.6);
    position:relative;
    z-index:2;
}

/* TÍTULOS */
.header h1{
    font-family:'Cinzel',serif;
    font-size:3.2rem;
    color:var(--accent);
    text-align:center;
    margin-bottom:12px;
    background: linear-gradient(90deg, #a78bfa, #c4b5fd);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
.header p{
    text-align:center;
    font-size:1.3rem;
    color:#64748b;
    margin-bottom:40px;
}

/* TARJETAS DE PREGUNTAS */
.card{
    background: linear-gradient(145deg, rgba(55,35,100,0.65), rgba(92, 60, 166, 0.85));
    padding:42px;
    border-radius:28px;
    margin-bottom:42px;
    border:1px solid rgba(139,92,246,.3);
    transition:.4s;
    backdrop-filter:blur(8px);
    color: #c8b5ff;
}
.card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 50px rgba(128, 82, 236, 0.25);
}
.pregunta{
    font-size:1.5rem;
    font-weight:600;
    color:#d451b7;
    line-height:1.6;
    margin-bottom:28px;
}
.pregunta span{
    color:var(--accent);
    font-weight:900;
    margin-right:12px;
    font-size:1.7rem;
}

/* RADIOS LÍQUIDOS ELEGANTE (sin neón) */
.radio-group{
    display:flex;
    flex-direction:column;
    gap:1.3rem;
}
.liquid-radio{
    position:relative;
    display:inline-flex;
    align-items:center;
    cursor:pointer;
    font-size:1.2rem;
    font-weight:500;
    color:#334155;
    user-select:none;
    transition:.35s;
}
.liquid-radio:hover{transform:scale(1.02)}
.liquid-radio input{position:absolute;opacity:0;cursor:pointer}
.liquid-radio .radio-visual{
    position:relative;
    width:1.8em;height:1.8em;
    margin-right:1em;
    border-radius:50%;
    background:var(--grad);
    border:3px solid rgba(139,92,246,.3);
    box-shadow:0 4px 12px rgba(107,70,193,.2);
    transition:.35s;
}
.liquid-radio .radio-visual::before{
    content:"";
    position:absolute;
    top:50%;left:50%;
    width:0.8em;height:0.8em;
    border-radius:50%;
    background:white;
    transform:translate(-50%,-50%) scale(0);
    transition:.3s ease;
}
.liquid-radio input:checked + .radio-visual::before{
    transform:translate(-50%,-50%) scale(1);
}

/* Degradados suaves profesionales */
.variant-lavender{--grad:linear-gradient(135deg, #8b5cf6, #a78bfa)}
.variant-coral{--grad:linear-gradient(135deg, #7c3aed, #9333ea)}
.variant-mint{--grad:linear-gradient(135deg, #6366f1, #818cf8)}
.variant-sky{--grad:linear-gradient(135deg, #3b82f6, #1d4ed8)}

/* BOTONES FINALES */
.botones-final{
    text-align:center;
    margin:80px 0 20px;
}
#enviar{
    padding:20px 90px;
    background: linear-gradient(135deg, var(--accent), #9333ea);
    color:white;
    border:none;
    border-radius:50px;
    font-size:1.8rem;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 12px 35px rgba(124,58,237,.5);
    transition:.4s;
}
#enviar:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 50px rgba(124,58,237,.6);
}
#enviar:disabled{
    background:#4c1d95; 
    cursor:not-allowed;
}
#reiniciar{
    margin-left:25px;
    padding:18px 70px;
    background:transparent;
    color:#ef4444;
    border:3px solid #ef4444;
    border-radius:50px;
    font-size:1.6rem;
    cursor:pointer;
    transition:.4s;
}
#reiniciar:hover{
    background:#ef4444;
    color:white;
}

/* RETROALIMENTACIÓN */
.retro{
    padding:25px;
    border-radius:16px;
    background:#b4ade8;
    margin-top:25px;
    font-weight:600;
    line-height:1.7;
    opacity:0;
    transition:.6s;
    border-left:5px solid var(--accent);
}
.retro.show{opacity:1}

/* RESULTADO FINAL */
.resultado{
    text-align:center;
    padding:80px 40px;
    background: linear-gradient(145deg, #f8fafc, #e0e7ff);
    border-radius:28px;
    margin-top:60px;
    border:2px solid var(--accent);
    display:none;
}
.resultado.show{display:block;animation:aparecer 1s}
@keyframes aparecer{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}

/* FOOTER */
footer{
    text-align:center;
    padding:3rem 1rem;
    background:var(--dark);
    color:white;
    margin-top:6rem;
}
footer a{color:#93c5fd;text-decoration:none}

/* RESPONSIVE */
@media (max-width:768px){
    .nav-links{
        position:fixed;top:75px;left:-100%;background:var(--primary);
        width:100%;flex-direction:column;padding:2rem;transition:left .4s;
    }
    .nav-links.active{left:0}
    .menu-toggle{display:block}
    .container{padding:30px;margin:20px}
    .card{padding:25px}
    #enviar, #reiniciar{width:100%;margin:10px 0}
}
.answer-input{
    width:100%;
    padding:18px 20px;
    margin-top:16px;
    border:2px solid #cbd5e1;
    border-radius:16px;
    font-size:1.1rem;
    font-family:'Montserrat',sans-serif;
    background:#ffffff;
    transition:all .4s ease;
    box-shadow:0 4px 15px rgba(0,0,0,0.06);
}
.answer-input:focus{
    outline:none;
    border-color:#7c3aed;
    box-shadow:0 0 0 4px rgba(124,58,237,0.15), 0 8px 25px rgba(124,58,237,0.2);
    transform:translateY(-2px);
}
.answer-input::placeholder{
    color:#94a3b8;
    font-style:italic;
}

/* Tarjetas con estado */
.question-card{
    background:#ffffff;
    padding:32px;
    border-radius:20px;
    margin-bottom:32px;
    border:2px solid transparent;
    box-shadow:0 8px 30px rgba(0,0,0,0.1);
    transition:all .5s ease;
}
.question-card.correct{
    border-color:#22c55e;
    background:#f0fdf4;
}
.question-card.error{
    border-color:#ef4444;
    background:#fef2f2;
}
.feedback{
    margin-top:16px;
    padding:16px;
    border-radius:12px;
    font-weight:600;
    opacity:0;
    transition:opacity .6s;
    border-left:5px solid;
}
.feedback.show{opacity:1}
.feedback:nth-child(odd){background:#f8fafc}
.open-input{
    width:100%;
    padding:18px 22px;
    margin-top:18px;
    border:2px solid #cbd5e1;
    border-radius:18px;
    font-size:1.2rem;
    font-family:'Inter',sans-serif;
    background:#ffffff;
    transition:all .4s ease;
    box-shadow:0 6px 20px rgba(0,0,0,0.08);
}
.open-input:focus{
    outline:none;
    border-color:#7c3aed;
    box-shadow:0 0 0 5px rgba(124,58,237,0.18), 0 12px 35px rgba(124,58,237,0.25);
    transform:translateY(-3px);
}
.open-input::placeholder{
    color:#94a3b8;
    font-style:italic;
}